<template>
    <div>
        工作台
        <el-button type="success" @click="search">防抖</el-button>
        <el-button type="danger" @click="search_2">节流</el-button>
    </div>

    <!-- 距离放假倒计时 -->
    <div class="d1">

    </div>

    <!-- 距离2024年除夕夜倒计时 -->
    <div class="d2">

    </div>

    <ul>
        <li class="li">
            <video id="video" width="100%" height="100%" src="../../public/123.mp4"></video>
        </li>
        <li class="li">
            <video id="video" width="100%" height="100%" src="../../public/456.mp4"></video>
        </li>
    </ul>
</template>

<script setup>
import _ from 'lodash'
import { ref, onMounted, nextTick } from 'vue';


// 防抖
const search = _.debounce(() => {
    console.log('防抖')
}, 3000)

// 节流
const search_2 = _.throttle(() => {
    console.log('节流')
}, 3000)

let time1 = new Date()  //现在时间
let time2 = new Date('2024-1-27')   //放假时间
let time3 = new Date('2024-2-9')    //除夕夜

const time = () => {
    nextTick(() => {
        // 获取时间戳
        let sjc = time3 - time1
        let miao = parseInt(sjc / 1000) % 60    //秒
        let fz = parseInt(sjc / 1000 / 60) % 60    //分钟
        let xh = parseInt(sjc / 1000 / 60 / 60) % 24    //小时
        let ts = parseInt(sjc / 1000 / 60 / 60 / 24)     //天数
        let d2 = document.getElementsByClassName('d2')
        // console.log(d1)
        d2[0].innerHTML = `距离除夕夜倒计时：${ts}天${xh}小时${fz}分钟${miao}秒`
    })
}
time()

</script>

<style scoped>
.d1 {
    width: 500px;
    height: 50px;
    border: 1px dotted #000;
    margin: 20px;
}
.d2 {
    width: 500px;
    height: 50px;
    border: 1px dotted #000;
    margin: 20px;
}

.li {
    float: left;
    width: 200px;
    height: 150px;
}
</style>